<template>
	<view>
		<!--
			导航栏-三方插件使用步骤
				1.uniapp官网找到插件市场
				2.输入插件名称uni-nav-bar查找
				3.点击左边：使用HBuilderX导入插件
				4.然后导入uni_modules文件使用
		 -->
		 <uni-nav-bar fixed="true">
			 <block slot="left">
				 <image src="../../static/image/cloud/y_03.png" class="top-img left"></image>
			 </block>
			 <view class="top-tab flex-box">
			 	<view :class="curNav==index?'active':''" @click="switchTab(index)" id="du" v-for="(item,index) in navList" :key="index">
			 		{{item.name}}
			 	</view>
			 </view>
			 <block slot="right">
				 <image src="../../static/image/mine/r.png" class="top-img"></image>
			 </block>
		 </uni-nav-bar>
		 <!-- 滚动列表 -->
		 <view class="page-content">
		 	<mescroll-uni 
				:dowm="downOption" 
				:up="upOption" 
				@down="downCallback"
				@up="upCallback"
				:fixed="false"
			>
				<!-- 上下轮播 -->
				<view class="date-bar flex-box">
					<view class="date-bar-left">
						云村热评<text class="iconfont">&#xe605</text>
						<swiper class="date-bar-swiper" :autoplay="true" 
						:duration="500" :circular="true" :vertical="true">
							<swiper-item v-for="(item,index) in msgList" :key="index">
								{{item.name}}
							</swiper-item>
						</swiper>
					</view>
					<view class="dateBox">	
						<view >
							{{curDate[1]}}
						</view>
						<view class="date-bar-num">
							{{curDate[2]}}
						</view>
					</view>
				</view>
				<!-- 左边 -->
				<view class="list-content flex-box">
					<view class="video-list flex-box">
						<view class="video-item" v-for="(item,index) in splitList.list1" :key="index">
							<view class="video-wrap">
								<image :src="item.coverUrl" mode="widthFix" class="img"></image>
								<view class="video-con">
									<view class="desc">
										{{item.title}}
									</view>
									<view class="creater-bar flex-box">
										<view class="name">
											{{item.creator[0].userName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 右边 -->
					<view class="video-list flex-box">
						<view class="video-item" v-for="(item,index) in splitList.list2" :key="index">
							<view class="video-wrap">
								<image :src="item.coverUrl" mode="widthFix" class="img"></image>
								<view class="video-con">
									<view class="desc">
										{{item.title}}
									</view>
									<view class="creater-bar flex-box">
										<view class="name">
											{{item.creator[0].userName}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		 </view>
	</view>
</template>

<script>
	import { apiGetVideo } from "@/apis/index.js"
	import uniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import MescrollUni from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		data() {
			return {
				navList:[
					{name:"广场",id:3452},
					{name:"动态",id:3462}
				],
				curNav:0,    		//当前的导航项目
				downOption:{		//下拉刷新
					auto:false  	//false即不默认执行
				},
				upOption:{   		//上拉加载下一页
					auto:false,
					page:{
						num:0,     	//起始页
						size:10,	//一页的条数
					}
				},
				msgList: [
					{ name: '他是我见过最年少有为的人', id: ''},
					{ name: '因为一个人而失眠，这真的好吗', id: ''},
					{ name: '花开花落，没有悲愁怎么是少年？', id: ''},
				],
				curDate:String(new Date()).split(" "),
				allList:[],					//所有视频数据
				splitList:[],				//拆开的视频数据
			}
		},
		components:{
			uniNavBar,
			MescrollUni
		},
		onLoad() {
			this.switchTab(0)
		},
		methods: {
			getList(pageNum, pageSize,successCallback,errCallback){	  // 视频列表接口
				let self = this
				 //根据资源id查询
				let params = {
					id:this.curNav+1,
					pageSize,
					pageNum
				}
				apiGetVideo(params).then(res => {
					successCallback&&successCallback(res.data.data)
				},err=>{
					errCallback&&errCallback()
				})
			},
			switchTab(val){  //切换导航按钮
				this.curNav = val
				// 获取所有的视频数据
				this.getList(1,5,res=>{ //1页5条数据
					console.log(res);
					this.allList = res
					this.splitVideoList()
				}) 
			},
			splitVideoList(){   //按索引拆分处理数据
				let i=0,list1=[],list2=[]
				while(i<this.allList.length){
					// 取偶
					list1.push(this.allList[i++])
					// 取奇
					if(i<this.allList.length){
						list2.push(this.allList[i++])
					}
				}
				this.splitList = {
					list1,
					list2
				}
			},
			downCallback(mescroll){
				console.log("下拉啦");
				// 重置列表为第一页，自动执行page.num = 1,再触发upcallback
				mescroll.resetUpScroll()
			},
			upCallback(mescroll){
				console.log("上拉啦");
				// 加载下一页数据
				this.getList(mescroll.num,mescroll.size,res=>{
					// 若是第一页则清空
					if(mescroll.num == 1){
						this.allList = []
					}
					// 累加数据
					this.allList = this.allList.concat(res)
					this.splitVideoList()
					// 成功的回调，隐藏下拉刷新状态
					mescroll.endSuccess()
				},()=>{
					// 失败的回调，隐藏下拉刷新状态
					mescroll.endErr()
				})
			},
		}
	}
</script>

<style lang="scss">
page{
	background: #f8f8f8;
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifdef H5 */
	top:44px;  // h5 无状态栏
	/* #endif */
}
.top-img {
	width: 50rpx;
	height: 40rpx;
	&.left {
		margin-left: 10rpx;
	}
}
.top-tab{
	width:310rpx;
	/* #ifdef MP-WEIXIN */
	width:250rpx;
	/* #endif */
	margin: 0 auto;
	justify-content: space-between;
	.active{
		position:relative;
		color:#f32628;
		&:after{
			position:absolute;
			content:'';
			left:50%;
			width: 94rpx;
			height: 4rpx;
			bottom: 0rpx;
			transform: translateX(-50%);
			background: #f32628;
			border-radius: 4rpx;
		}
	}
}
.date-bar{
	width: 686rpx;
	height: 160rpx;
	padding: 20rpx 34rpx;
	margin: 20rpx auto;
	border-radius: 14rpx;
	color:#fff;
	background: rgba(0,0,0,.7);
	line-height: 70rpx;
	font-weight: 600;
	justify-content: space-between;
	.date-bar-left{
		font-size: 34rpx;
		font-weight: 600;
	}
	.date-bar-num{
		margin-top:-20rpx;
		font-size: 44rpx;
	}
}
.list-content{
	padding-left:30rpx;
	flex-direction: row; // 主轴方向设置为水平方向
}
.video-list{
	flex-direction: column; // 主轴方向设置为垂直方向
}
.video-item{
	width: 334rpx;
	margin-right:20rpx;
	margin-bottom:20rpx;
	border-radius: 14rpx;
	overflow: hidden;
	color:#353536;
	background: #fff;
	line-height: 36rpx;
	.img{
		display:block;
		width:100%;
		min-height:188rpx;
	}
	.avactor{
		width: 28rpx;
		height:28rpx;
		margin-right: 10rpx;
		border-radius: 28rpx;
		background: #ddd;
	}
	.video-con{
		padding: 16rpx 16rpx 30rpx;
	}
	.avactor-box {
		align-items: center;
	}
	.creater-bar{
		margin-top: 10rpx;
		align-items: center;
		color:#999;
		font-size: 20rpx;
	}
}

.date-bar-swiper{
	width:430rpx;
	height:40rpx;
	line-height: 40rpx;
	color:#d0d2d3;
	font-size: 24rpx;
}

#du{
	font-weight: 700;
	font-size: 38rpx;
	margin: auto 0;
}
.dateBox{
	display: flex;
	flex-direction: column;
}
</style>
